import React, { useState, useEffect } from 'react';
import { Cloud, Sun, CloudRain, Thermometer, Droplets, Wind, Eye, MapPin } from 'lucide-react';

interface WeatherData {
    district: string;
    temperature: number;
    humidity: number;
    windSpeed: number;
    airQuality: number;
    weather: string;
    weatherIcon: 'sunny' | 'cloudy' | 'rainy';
    minTemp: number;
    maxTemp: number;
}

// 重庆主城10区天气数据
// const weatherData: WeatherData[] = [
//     {
//         district: '渝中区',
//         temperature: 28,
//         humidity: 65,
//         windSpeed: 12,
//         airQuality: 45,
//         weather: '多云',
//         weatherIcon: 'cloudy',
//         minTemp: 22,
//         maxTemp: 32
//     },
//     {
//         district: '两江新区',
//         temperature: 27,
//         humidity: 66,
//         windSpeed: 12,
//         airQuality: 40,
//         weather: '多云',
//         weatherIcon: 'cloudy',
//         minTemp: 21,
//         maxTemp: 31
//     },
//     {
//         district: '南岸区',
//         temperature: 29,
//         humidity: 62,
//         windSpeed: 10,
//         airQuality: 48,
//         weather: '小雨',
//         weatherIcon: 'rainy',
//         minTemp: 23,
//         maxTemp: 33
//     },
//     {
//         district: '九龙坡区',
//         temperature: 26,
//         humidity: 70,
//         windSpeed: 8,
//         airQuality: 38,
//         weather: '多云',
//         weatherIcon: 'cloudy',
//         minTemp: 20,
//         maxTemp: 30
//     },
//     {
//         district: '沙坪坝区',
//         temperature: 25,
//         humidity: 72,
//         windSpeed: 14,
//         airQuality: 35,
//         weather: '晴',
//         weatherIcon: 'sunny',
//         minTemp: 19,
//         maxTemp: 29
//     },
//     {
//         district: '大渡口区',
//         temperature: 30,
//         humidity: 58,
//         windSpeed: 11,
//         airQuality: 52,
//         weather: '多云',
//         weatherIcon: 'cloudy',
//         minTemp: 24,
//         maxTemp: 34
//     },
//     {
//         district: '巴南区',
//         temperature: 31,
//         humidity: 55,
//         windSpeed: 9,
//         airQuality: 55,
//         weather: '晴',
//         weatherIcon: 'sunny',
//         minTemp: 25,
//         maxTemp: 35
//     },
//     {
//         district: '北碚区',
//         temperature: 23,
//         humidity: 78,
//         windSpeed: 13,
//         airQuality: 28,
//         weather: '小雨',
//         weatherIcon: 'rainy',
//         minTemp: 17,
//         maxTemp: 27
//     }
// ];

function WeatherInfo() {
    const [currentTime, setCurrentTime] = useState(new Date());
    const [weatherData, setWeatherData] = useState([]);

    useEffect(() => {
        if (!window.electronAPI) return;

        const readLatest = async () => {
            try {
                const latest = await window.electronAPI.getWeather();
                console.log('getWeather latest =>', latest);
                if (latest?.ok) {
                    let data = []
                    latest.items.map(a=> {
                        data.push({
                            district: a.tqname,
                            temperature: a.weather?.data?.real?.weather?.temperature || 0,
                            humidity: a.weather?.data?.real?.weather?.humidity || 0,
                            windSpeed: a.weather?.data?.real?.wind?.speed || 0,
                            airQuality: a.weather?.data?.air?.aqi || 0,
                            weather: a.weather?.data?.real?.weather?.info || '',
                            weatherIcon: a.weather?.data?.real?.weather?.img || '',
                            minTemp: a.weather?.data?.predict?.detail?.[0]?.night?.weather?.temperature || 0,
                            maxTemp: a.weather?.data?.predict?.detail?.[0]?.day?.weather?.temperature || 0
                        })
                    })
                    setWeatherData(data);
                }
            } catch {}
        };

        // 立即读取一次
        readLatest();
        const ms = 30 * 60 * 1000;
        const timer = setInterval(readLatest, ms);

        const timer2 = setInterval(() => {
            setCurrentTime(new Date());
        }, 1000);

        return () => { clearInterval(timer2);  clearInterval(timer); };
    }, []);

    const currentDate = currentTime.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    }).replace(/\//g, '年').replace(/年(\d+)年/, '年$1月') + '日';

    const getAirQualityLevel = (aqi: number) => {
        if (aqi <= 50) return { level: '优', color: 'text-green-400' };
        if (aqi <= 100) return { level: '良', color: 'text-yellow-400' };
        if (aqi <= 150) return { level: '轻度污染', color: 'text-orange-400' };
        return { level: '中度污染', color: 'text-red-400' };
    };

    return (
        <div className="min-h-screen w-full relative overflow-hidden bg-gradient-to-br from-slate-900 via-blue-900 to-slate-800">
            {/* 高德地图背景 */}
            <div className="absolute inset-0 opacity-20">
                <img src="./map.png" className="w-full h-full object-cover" alt="地图背景" />
            </div>

            {/* 河水背景效果 */}
            <div className="absolute inset-0 water-background wave-content">
                <div className="wave"></div>
                <div className="wave-bg" style={{height: '1200px'}}></div>
            </div>

            {/* 动态背景效果 */}
            <div className="absolute inset-0 overflow-hidden pointer-events-none">
                {/* 粒子效果 */}
                <div className="absolute inset-0">
                    {Array.from({ length: 60 }).map((_, i) => (
                        <div
                            key={i}
                            className="absolute -top-6 w-4 h-4 bg-cyan-400/20 rounded-full particle-float"
                            style={{
                                left: `${Math.random() * 100}%`,
                                animationDelay: `${Math.random() * 10}s`,
                                animationDuration: `${8 + Math.random() * 6}s`
                            }}
                        />
                    ))}
                </div>
            </div>

            {/* 主要内容区域 */}
            <div className="relative z-10 h-full flex flex-col px-16 py-20">
                {/* 顶部标题区域 */}
                <div className="text-center mb-20">
                    <div className="flex items-center justify-center mb-8">
                        <div className="h-1 w-32 bg-gradient-to-r from-transparent via-cyan-400 to-transparent glow-line"></div>
                        <div className="mx-8 relative">
                            <Cloud className="text-cyan-400 drop-shadow-2xl" size={100} />
                            <div className="absolute inset-0 bg-cyan-400/20 rounded-full blur-xl animate-pulse"></div>
                        </div>
                        <div className="h-1 w-32 bg-gradient-to-r from-transparent via-cyan-400 to-transparent glow-line"></div>
                    </div>
                    <h1 className="text-6xl font-bold text-white mb-6 tracking-wider drop-shadow-2xl">
                        重庆主城天气
                    </h1>
                    <div className="text-4xl text-cyan-300 tracking-widest opacity-90 font-bold">
                        {currentDate} {currentTime.toLocaleTimeString('zh-CN')}
                    </div>
                </div>

                {/* 天气信息网格 */}
                <div className="flex-1">
                    <div className="grid grid-cols-2 gap-12">
                        {weatherData.map((weather, index) => (
                            <div key={weather.district} className="glass-card p-12 border border-cyan-500/30 shadow-2xl card-glow site-bg2">
                                {/* 区域标题 */}
                                <div className="flex items-center justify-between mb-12">
                                    <h3 className="text-5xl font-bold text-white flex items-center">
                                        <MapPin className="mr-4 text-cyan-400" size={40} />
                                        {weather.district}
                                    </h3>
                                    <div className="relative">
                                        <img src={`./weather/${weather.weatherIcon}.png`} className="w-full h-full" alt={weather.weather} />
                                        <div className="absolute inset-0 bg-current/20 rounded-full blur-xl animate-pulse"></div>
                                    </div>
                                </div>

                                {/* 主要天气信息 */}
                                <div className="grid grid-cols-2 gap-8 mb-12">
                                    <div className="text-center glass-item py-8">
                                        <div className="text-7xl font-bold text-white mb-4 drop-shadow-lg">
                                            {weather.temperature}°
                                        </div>
                                        <div className="text-3xl text-gray-300">{weather.weather}</div>
                                    </div>
                                    <div className="text-center glass-item py-8">
                                        <div className="text-4xl text-gray-300 mb-4">温度范围</div>
                                        <div className="text-4xl font-bold text-white drop-shadow-lg">
                                            {weather.minTemp}° - {weather.maxTemp == '9999'?' - ':weather.maxTemp}°
                                        </div>
                                    </div>
                                </div>

                                {/* 详细信息 */}
                                <div className="space-y-6">
                                    <div className="glass-item p-6 flex justify-between items-center">
                                        <div className="flex items-center">
                                            <Droplets className="mr-4 text-blue-400" size={32} />
                                            <span className="text-3xl text-gray-300">湿度</span>
                                        </div>
                                        <span className="text-3xl font-bold text-white">{weather.humidity}%</span>
                                    </div>

                                    <div className="glass-item p-6 flex justify-between items-center">
                                        <div className="flex items-center">
                                            <Wind className="mr-4 text-green-400" size={32} />
                                            <span className="text-3xl text-gray-300">风速</span>
                                        </div>
                                        <span className="text-3xl font-bold text-white">{weather.windSpeed} km/h</span>
                                    </div>

                                    <div className="glass-item p-6 flex justify-between items-center">
                                        <div className="flex items-center">
                                            <Eye className="mr-4 text-purple-400" size={32} />
                                            <span className="text-3xl text-gray-300">空气质量</span>
                                        </div>
                                        <div className="text-right">
                                            <div className="text-3xl font-bold text-white">{weather.airQuality}</div>
                                            <div className={`text-2xl font-bold ${getAirQualityLevel(weather.airQuality).color}`}>
                                                {getAirQualityLevel(weather.airQuality).level}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default WeatherInfo;